<template>
  <div class="progress-circle">
    <svg 
      :width="radius" 
      :height="radius" 
      viewBox="0 0 100 100" 
      version="1.1"
      xmlns="https://www.w3.org/2000/svg"
    >
      <circle 
        class="progress-circle_background" 
        r="50" 
        cx="50" 
        cy="50" 
        fill="transparent"
      />
      <circle 
        class="progress-circle_bar" 
        r="50" 
        cx="50" 
        cy="50" 
        fill="transparent"
        :stroke-dasharray="dashArray"
        :stroke-dashoffset="dashOffset"
      />
    </svg>
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">


  export default {
    data(){
      return {
        dashArray:Math.PI*100
      }
    },
    props: {
      radius: {
        type: Number,
        default: 40
      },
      percent:{
        type:Number,
        default:0
      }
    },
    computed:{
      dashOffset(){
        return (1-this.percent)*this.dashArray
      }
    }
    
  }
</script>

<style>
  .progress-circle{
    position: relative;
    text-align: center;
    align-items: center;
  }
  .progress-circle circle{
    stroke-width:8px;
    transform-origin: center;
  }
  .progress-circle_background{
    transform: scale(0.9);
    stroke: black;
  }
  .progress-circle_bar{
    transform: scale(0.9) rotate(-90deg) ;
    stroke: red;
  }
</style>
